<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>创建社区</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" th:href="@{/center/lib/layui-v2.5.5/css/layui.css}" media="all">
		<link rel="stylesheet" th:href="@{/center/css/public.css}" media="all">
		<link rel="stylesheet" th:href="@{/center/js/lay-module/step-lay/step.css}" media="all">
		<link rel="stylesheet" th:href="@{/center/js/lay-module/step-lay/step.css}" media="all">
		<script th:src="@{/center/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
		<script th:src="@{/center/js/lay-config.js}" charset="utf-8"></script>
		<script>
			layui.use(['form', 'step', 'layer', 'layarea'], function() {
				var $ = layui.$,
					form = layui.form,
					step = layui.step,
					layer = layui.layer,
					layarea = layui.layarea;
		
		
				//渲染分布模块
				step.render({
					elem: '#stepForm',
					filter: 'stepForm',
					width: '100%', //设置容器宽度
					stepWidth: '750px',
					height: '500px',
					stepItems: [{
						title: '填写社区基本信息'
					}, {
						title: '确认信息'
					}, {
						title: '完成'
					}]
				});
				//渲染地区三级联动
				layarea.render({
					elem: '#area-picker',
					change: function(res) {
						//选择结果
						console.log(res);
					}
				});
				//监听下一步
				form.on('submit(formStep)', function(data) {
					step.next('#stepForm');
		
					form.val("checkForm", {
						"communityNameCheck": data.field.communityName,
						"communityAddrCheck": data.field.province + data.field.city + data.field.county + data.field.street,
						"communityTelCheck": data.field.communityTel,
		
					});
					return false;
				});
				//监听表单提交
				form.on('submit(formStep2)', function(data) {
		
					console.log(JSON.stringify(data.field));
		
					$.ajax({
						url: '/center/forumInit',
						method: 'POST',
						contentType: 'application/json;charset=utf-8',
						data: JSON.stringify(data.field),
						success: function(res) {
							if (res.msg === "成功创建社区记录") {
								layer.alert(res.msg + res.count + '条');
								step.next('#stepForm');
							} else {
								layer.alert(res.msg);
							}
		
						}
					});
		
		
					return false;
				});
				//上一步按钮点击
				$('.pre').click(function() {
					
					step.pre('#stepForm');
				});
				//再次新建社区按钮点击
				$('.next').click(function() {
					step.next('#stepForm');
					window.location.reload();
					$("#originalForm")[0].reset();
				});
				//清空第一页表单
				$('#formClean').click(function() {
					$("#originalForm")[0].reset();
				});
		
				$('#forumSearch').click(function() {
					window.location.href = "/center/page/forum-search.html"
				});
		
			})
		
		
			//生成时间戳
		</script>
		<style>
			/* 去掉number控件的加减 */
        /* google、safari */
        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }

        /* firefox */
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">

				<div class="layui-fluid">
					<div class="layui-card">
						<div class="layui-card-body" style="padding-top: 40px;">
							<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
								<div carousel-item>
									<div>
										<form class="layui-form" id="originalForm" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
											<div class="layui-form-item">
												<label class="layui-form-label">社区名称:</label>
												<div class="layui-input-block">
													<input type="text" name="communityName" placeholder="请填写社区名称" class="layui-input" lay-verify="required">
												</div>
											</div>


											<div class="layui-form-item">
												<label class="layui-form-label">社区电话:</label>
												<div class="layui-input-block">
													<input type="text" name="communityTel" placeholder="请填写社区电话" value="" class="layui-input" lay-verify="number"
													 required maxlength="11">
												</div>
											</div>

											<div class="layui-form-item">

												<div class="layui-form-item" id="area-picker">
													<div class="layui-form-label">社区地址:</div>
													<div class="layui-input-block">
														<select name="province" class="province-selector" data-value="四川省" lay-filter="province-1">
															<option value="">请选择省</option>
														</select>
													</div>
													<div class="layui-input-block">
														<select name="city" class="city-selector" data-value="成都市" lay-filter="city-1">
															<option value="">请选择市</option>
														</select>
													</div>
													<div class="layui-input-block">
														<select name="county" class="county-selector" data-value="高新区" lay-filter="county-1">
															<option value="">请选择区</option>
														</select>
													</div>
												</div>

											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">社区街道:</label>
												<div class="layui-input-block">
													<input type="text" name="street" placeholder="请填写社区街道" class="layui-input" lay-verify="required">
												</div>
											</div>

											<div class="layui-form-item">
												<div class="layui-input-block">
													<button class="layui-btn" lay-submit lay-filter="formStep">
														&emsp;下一步&emsp;
													</button>
													<button class="layui-btn" id="formClean">
														&emsp;清空&emsp;
													</button>
												</div>
											</div>
										</form>
									</div>
									<div>
										<form class="layui-form" lay-filter="checkForm" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
											<div class="layui-form-item">
												<label class="layui-form-label">社区名称:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">
														<input style="border:0;color:gray;font-weight:bold" type="text" readonly="readonly" name="communityNameCheck">
													</div>
												</div>
											</div>






											<div class="layui-form-item">
												<label class="layui-form-label">社区地址:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">
														<input style="border:0;color:gray;font-weight:bold" type="text" readonly="readonly" name="communityAddrCheck">
													</div>
												</div>
											</div>


											<div class="layui-form-item">
												<label class="layui-form-label">社区电话:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">
														<input style="border:0;color:gray;font-weight:bold" type="text" readonly="readonly" name="communityTelCheck">
													</div>
												</div>
											</div>


											<div class="layui-form-item">
												<div class="layui-input-block">
													<button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
													<button class="layui-btn" lay-submit lay-filter="formStep2">
														&emsp;确认创建&emsp;
													</button>
												</div>
											</div>
										</form>
									</div>
									<div>
										<div style="text-align: center;margin-top: 90px;">
											<i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
											<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
												社区创建成功
											</div>
											<div style="font-size: 14px;color: #666;margin-top: 20px;"></div>
										</div>
										<div style="text-align: center;margin-top: 50px;">
											<button class="layui-btn next">再创建一个社区</button>
											<button class="layui-btn layui-btn-primary" id="forumSearch">查看已创建社区</button>
										</div>
									</div>
								</div>
							</div>
							<hr>

							<div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
								<h3>说明</h3><br>
								<p>社区创建后由社区管理员自行维护其他信息</p>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		
	</body>
</html>
